<template>
  <view>
    <!-- #ifndef  H5 -->
    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
      <u-navbar
          :is-back="false"
          :title-bold="true"
          :is-fixed="false"

          title-color="#000000"
          :border-bottom="false"
          back-icon-name="arrow-leftward"
          back-icon-color="#000000"
          :background="{ background: 'rgba(256,256, 256,0)' }"
      ></u-navbar>
    </u-sticky>
    <!-- #endif -->

    <view class="sort">

      <navigator class="header" hover-class="none" url="/pages/goods_search/goods_search">
        <view class="search-view">
          <u-search wrap-bg-color="transparent"
                    :bg-color="'#f7f7f7'"
                    :height="68"
                    :show-action="true"
                    :action-text="'搜索'"
                    :action-style="{
      color: '#ffffff',
      fontSize: '28rpx',
    }" :disabled="true"></u-search>
        </view>
      </navigator>
      <view class="content">
        <cate-one v-if="appConfig.cate_style == 2" :list="cateList"></cate-one>
        <cate-two v-if="appConfig.cate_style == 3" :list="cateList"></cate-two>
        <cate-three v-if="appConfig.cate_style == 4" :list="cateList"></cate-three>
        <cate-four v-if="appConfig.cate_style == 1" :list="cateList"></cate-four>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getCatrgory
} from '@/api/store';
import {
  getRect,
  setTabbar
} from '@/utils/tools';
import {
  mapGetters,
  mapActions
} from 'vuex'
import Cache from '@/utils/cache'

export default {
  data() {
    return {
      cateList: []
    };
  },

  components: {},
  onLoad(options) {
    setTabbar()
    this.getCatrgoryFun();
  },
  onShow() {
    this.getCartNum()
  },
  onShareAppMessage() {
    const shareInfo = Cache.get('shareInfo')
    return {
      title: shareInfo.mnp_share_title,
      path: "pages/index/index?invite_code=" + this.inviteCode,
      imageUrl: shareInfo.mnp_share_image,
    };
  },
  methods: {
    ...mapActions(['getCartNum']),
    getCatrgoryFun() {
      getCatrgory().then(res => {
        if (res.code == 1) {
          this.cateList = res.data
        }
      });
    },

  },
  computed: {
    ...mapGetters(["cartNum", "inviteCode", "appConfig"])
  }
};
</script>
<style lang="scss">
$header-height: 94rpx;
$nav-height: 80rpx;
page {


  .sort {
    .header {
      box-sizing: border-box;
      height: $header-height;


      .search {
        flex: 1;
        height: 60rpx;

        input {
          flex: 1;
          height: 100%;
        }
      }
    }

    .content {
      height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom));
    }
  }

}

.search-view {
  margin: 0 20rpx;
}

.u-content {
  padding-right: 0; /* 移除默认的右侧padding */
  position: relative;
}

.u-action-active {
  position: absolute;
  right: 15px; /* 根据需要调整位置 */

  z-index: 1000; /* 确保按钮在输入框之上 */
  background-color: #0066ff;
  color: #ffffff !important;
  border-radius: 32rpx;
  height: 50rpx;
  line-height: 50rpx;
  width: 100rpx !important;
}
</style>
